import React from 'react';

class App extends React.Component {
    state = {
        count: 0,
        opacity: 1
    };

    //挂载
    componentDidMount() {
        console.log('Component did mount');
        this.timer = setInterval(() => {
            let {opacity} = this.state
            opacity -= .1
            if (opacity <= 0) {
                opacity = 1
                clearInterval(this.timer)
            }
            this.setState({opacity})
        }, 200)
    }

    //
    shouldComponentUpdate(nextProps, nextState) {
        console.log(this.state.count)
        console.log('Should component update');

        return true;
    }

    getSnapshotBeforeUpdate(prevProps, prevState) {
        console.log(this.state.count)
        console.log('Get snapshot before update');
        return null;
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log(this.state.count)
        console.log('Component did update');
    }

    componentWillUnmount() {
        console.log('Component will unmount');
        clearInterval(this.timer);


    }

    handleIncrement = () => {
        this.setState({count: this.state.count + 1});
    };

    render() {
        return (
            <div>
                <div>
                    <div>
                        <h1 style={{opacity: this.state.opacity}}>React Lifecycle Example</h1>
                        <p>Count: {this.state.count}</p>
                        <button onClick={this.handleIncrement}>Increment</button>
                    </div>
                </div>
            </div>
        );
    }
}

export default App;
